import {
    textIndent,
    templateBox,
    tagContent,
    returnCustomContent,
    appCode,
    importReact,
    scriptBox,
    returnAttr,
    returnTagContent,
    returnVAttr,
    vfnBox,
    fnBox,
    addEvtLis,
    addVEvtLis,
    userState,
    useEffect,
    returnFn,
    formsState,
    removeEvtLis,
    refAttr
} from "../../../static/utils/codeHTML.js"
export const data = {
    "key": "checked-tree",
    "title": "Checked-Tree 树形列表",
    "titleText": ["多层次的结构列表。"],
    CODEList: [
        {
            title: '基本用法',//标题
            introduction: "最简单的用法,展示，选中，展开收缩",//简介
            attention: "渲染数据treeData，需要通过访问ref传递",//用法提示
            btnList: [],
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    url: '2.png',
                    width: "",
                    height: "",
                    isOpen: true
                },
            ],
            vueHTML: `
                ${templateBox(tagContent("checked-tree", `
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"treeRef"</span>`))}
                <br />
                ${scriptBox(
                "",
                `this.$refs.treeRef.<span class=code-attr-name>treeData</span> = [<span class=code-punctuation>{name:"...",id:"...",...}</span>]`,
                ""
            )}
            `,
            vueCode: `
            <template>
                <checked-tree ref="treeRef"></checked-tree>
            </template>
            <script>
                export default {
                    data() {
                        return {
                        }
                    },
                    mounted(){
                        this.$refs.treeRef.treeData = [{name:"...",id:"...",...}]
                    },
                    methods:{
                    }
                }
            </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    treeRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${refAttr('userRef', 'treeData', "[<span class=code-punctuation>{name:'...',id:'...',...}</span>]")}
                        `)
                }
                <span class=code-punctuation>}</span>
                `)))}
                ${textIndent(
                    returnTagContent("checked-tree", `
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>treeRef</span><span class=code-punctuation>}</span>`)
                )}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
            import { FC,useRef,useEffect } from 'react';
            const App: FC = () => {
                const treeRef = useRef<any>()
                useEffect(() => {
                    if ( userRef.current ) {
                        userRef.current?.treeData = [{name:'...',id:'...',...}]
                    }
                },[]);
                return <checked-tree ref={treeRef}></checked-tree>
            };
            `,//复制的代码
        },
        {
            title: '受控操作',//标题
            introduction: "外部控制选中节点",//简介
            btnList: [],
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    url: '1.png',
                    width: "",
                    height: "",
                    isOpen: true
                },
            ],
            vueHTML: `
                ${templateBox(tagContent("checked-tree", `
                <span class=code-attr-name>:value</span><span class=code-punctuation>=</span><span class=code-punctuation>"users"</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"treeRef"</span>`))}
                <br />
                ${scriptBox(
                "users:'1'",
                `this.$refs.treeRef.<span class=code-attr-name>treeData</span> = [<span class=code-punctuation>{name:"...",id:"1",...}</span>]
                </br>
                this.$refs.treeRef.<span class=code-attr-name>nodeSelect</span> = <span class=code-this>this</span>.<span class=code-punctuation>nodeSelect</span>`,
                vfnBox('nodeSelect', `
                    <span class=code-this>this</span>.users
                    =
                    val.id
                    `, 'val')
            )}
            `,
            vueCode: `
            <template>
                <checked-tree :value="users" ref="treeRef"></checked-tree>
            </template>
            <script>
                export default {
                    data() {
                        return {
                            users:'1'
                        }
                },
                    mounted(){
                        this.$refs.treeRef.treeData = [{name:"...",id:"1",...}]
                        this.$refs.treeRef.nodeSelect = this.nodeSelect
                    },
                    methods:{
                        nodeSelect(val) {
                            this.users = val.id
                        },
                    }
                }
            </script>
            `,
            reactHTML: `
            ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    treeRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('users', 'setUsers', '&lt;string', '"1"'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    treeRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${refAttr('treeRef', 'treeData', "[<span class=code-punctuation>{name:'...',id:'1',...}</span>]")}
                            </br>
                            ${refAttr('treeRef', 'nodeSelect', "nodeSelect")}
                        `)
                }
                <span class=code-punctuation>}</span>
                `)))}
                ${textIndent(fnBox("nodeSelect", "val", `
                    <span class=code-keyword>setUsers</span><span class=code-punctuation>(</span>val.id<span class=code-punctuation>)</span>
                `))}
                ${textIndent(
                    returnTagContent("checked-tree", `
                        <span class=code-attr-name>value</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>users</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>treeRef</span><span class=code-punctuation>}</span>`)
                )}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
            import { FC,useRef,useEffect,useState } from 'react';
            const App: FC = () => {
                const treeRef = useRef<any>()
                const [ users, setUsers ] = useState<string>("1")
                useEffect(() => {
                    if ( treeRef.current ) {
                        treeRef.current.treeData = [{name:'...',id:'1',...}]
                        treeRef.current.nodeSelect = nodeSelect
                    }
                },[]);
                function nodeSelect(val:any) {
                    setUsers(val.id)
                }
                return <checked-tree value={users} ref={treeRef}></checked-tree>
            };
            `
        },
        {
            title: '可搜索',//标题
            introduction: "模糊匹配，展示包含搜索关键字的节点",//简介
            btnList: [],
            vueHTML: `
                ${templateBox(tagContent("checked-tree", `
                <span class=code-attr-name>:searchtext</span><span class=code-punctuation>=</span><span class=code-punctuation>"searchtext"</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"treeRef"</span>`))}
                <br />
                ${scriptBox(
                "searchtext:''",
                `this.$refs.treeRef.<span class=code-attr-name>treeData</span> = [<span class=code-punctuation>{name:"...",id:"...",...}</span>]`,
            )}
            `,
            vueCode: `
            <template>
                <checked-tree :searchtext="searchtext" ref="treeRef"></checked-tree>
            </template>
            <script>
                export default {
                    data() {
                        return {
                            searchtext:''
                        }
                },
                    mounted(){
                        this.$refs.treeRef.treeData = [{name:"...",id:"1",...}]
                    },
                    methods:{
                    }
                }
            </script>
            `,
            reactHTML: `
            ${importReact("FC,useRef,useEffect,useState")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    treeRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('searchText', 'setSearchText', '&lt;string', '""'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    treeRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${refAttr('treeRef', 'treeData', "[<span class=code-punctuation>{name:'...',id:'...',...}</span>]")}
                        `)
                }
                <span class=code-punctuation>}</span>
                `)))}
                ${textIndent(
                    returnTagContent("checked-tree", `
                        <span class=code-attr-name>searchtext</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>searchText</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>treeRef</span><span class=code-punctuation>}</span>`)
                )}
                <span class=code-punctuation>};</span>
            `,
            reactCode: `
            import { FC,useRef,useEffect,useState } from 'react';
            const App: FC = () => {
                const treeRef = useRef<any>()
                const [ searchText, setSearchText ] = useState<string>("")
                useEffect(() => {
                    if ( treeRef.current ) {
                        treeRef.current.treeData = [{name:'...',id:'...',...}]
                    }
                },[]);
                return <checked-tree searchtext={searchText} ref={treeRef}></checked-tree>
            };
            `
        },
        {
            title: '图标展示',//标题
            introduction: "展示默认图标，可使用 ref.iconRender 传入一个方法，返回自定义图标。",//简介
            attention: "iconRender方法只接受HTML字符串，暂时不接受react，vue组件之类。",//用法提示
            btnList: [],
            imgs: [
                //代码效果图片展示，isOpen-是否可以点击预览
                {
                    url: '3.png',
                    width: "200px",
                    height: "260px",
                    isOpen: true
                },
            ],
            vueHTML: `
                ${templateBox(tagContent("checked-tree", `
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"treeRef"</span>
                    <span class=code-attr-name>:isicon</span><span class=code-punctuation>=</span><span class=code-punctuation>"true"</span>`))}
                <br />
                ${scriptBox(
                "",
                `this.$refs.treeRef.<span class=code-attr-name>treeData</span> = [<span class=code-punctuation>{name:"...",id:"...",...}</span>]`,
                ""
            )}
            `,
            vueCode: `
            <template>
                <checked-tree ref="treeRef" :isicon="true"></checked-tree>
            </template>
            <script>
                export default {
                    data() {
                        return {
                        }
                    },
                    mounted(){
                        this.$refs.treeRef.treeData = [{name:"...",id:"...",...}]
                    },
                    methods:{
                    }
                }
            </script>
            `,
            reactHTML: `
                ${importReact("FC,useRef,useEffect")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    treeRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    userRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${refAttr('userRef', 'treeData', "[<span class=code-punctuation>{name:'...',id:'...',...}</span>]")}
                        `)
                }
                <span class=code-punctuation>}</span>
                `)))}
                ${textIndent(
                    returnTagContent("checked-tree", `
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>treeRef</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>isicon</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>true</span><span class=code-punctuation>}</span>`)
                )}
                <span class=code-punctuation>};</span>
            `,//代码展示的HTML
            reactCode: `
            import { FC,useRef,useEffect } from 'react';
            const App: FC = () => {
                const treeRef = useRef<any>()
                useEffect(() => {
                    if ( userRef.current ) {
                        userRef.current?.treeData = [{name:'...',id:'...',...}]
                    }
                },[]);
                return <checked-tree isicon={true} ref={treeRef}></checked-tree>
            };
            `,//复制的代码
        },
        {
            title: '异步数据加载',//标题
            introduction: "点击展开节点，动态加载数据。",//简介
            btnList: [],
            vueHTML: `
                ${templateBox(tagContent("checked-tree", `
                <span class=code-attr-name>:loading</span><span class=code-punctuation>=</span><span class=code-punctuation>"</span><span>loading</span><span class=code-punctuation>"</span>
                    <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>"treeRef"</span>`))}
                <br />
                ${scriptBox(
                "loading:false",
                `
                <span class=code-this>this</span>.<span class=code-attr-name>getTreeRoot()</span>
                </br>
                <span class=code-this>this</span>.$refs.treeRef.<span class=code-attr-name>loadData</span> = <span class=code-this>this</span>.<span class=code-attr-name>getTreeChild</span>`,
                `<span class=code-punctuation>//获取树根节点列表</span></br>
                ${vfnBox('getTreeRoot', `
                    <span class=code-this>this</span>.loading = true
                    <br />
                    <span class=code-attr-name>getTreeRootRequest()</span>.then(<span class=code-this>res</span> <span class=code-keyword>=> {</span>
                    <br />
                    ${textIndent(`
                    <span class=code-this>this</span>.$refs.treeRef.<span class=code-attr-name>treeData</span> = ${returnVAttr('<span class=code-this>res</span>.data.map', `
                            {<br />
                                ${textIndent(`
                                    item.isLeaf = false
                                    <br />
                                    <span class=code-tag>return</span> item
                                    `)
                    }}`)
                    }<br />
                    <span class=code-this>this</span>.loading = false`)
                    }
                    <span class=code-keyword>}</span>)
                    `)}<br />
                    <span class=code-punctuation>//动态获取树子节点列表</span></br>
                    ${vfnBox('getTreeChild',`
                    <span class=code-tag>return</span> <span class=code-attr-name>getTreeChildRequest(<span class=code-punctuation>node.id</span>)</span>
                    `,'node')}
                    `,
                    importReact('getTreeRootRequest，getTreeChildRequest','@/services/maintenance-package')
            )}
            `,
            vueCode:`
            <template>
                <checked-tree :loading="loading" ref="treeRef"></checked-tree>
            </template>
            <script>
            import { getTreeRootRequest,getTreeChildRequest } from '@/services/maintenance-package';
            export default {
                data() {
                    return {
                        loading:false
                    }
                },
                mounted(){
                    this.getTreeRoot()
                    this.$refs.treeRef.loadData = this.getTreeChild
                },
                methods:{
                    //获取树根节点列表
                    getTreeRoot() {
                        this.loading = true
                        getTreeRootRequest().then(res => {
                            this.$refs.treeRef.treeData = res.data.map(item => {
                                item.isLeaf = false
                                return item
                            })
                            this.loading = false
                        })
                    },
                    //动态获取树子节点列表
                    getTreeChild(node) {
                        return getTreeChildRequest(node.id)
                    },
                }
            }
            </script>
            `,
            reactHTML:`
            ${importReact("FC,useRef,useEffect,useState")}
            ${importReact("getTreeRootRequest,getTreeChildRequest","@/services/maintenance-package")}
                ${appCode()}
                ${textIndent(`
                    <span class=code-keyword>const</span>
                    treeRef
                    <span class=code-punctuation>=</span>
                    <span class=code-method>useRef<span class=code-keyword>&lt;any></span></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
                `)}
                ${textIndent(userState('loading', 'setLoading', '&lt;boolean', 'false'))}
                ${textIndent(useEffect(textIndent(`
                    <span class=code-tag>if</span>
                    <span class=code-punctuation>(</span>
                    treeRef.<span class=code-keyword>current</span>
                    <span class=code-punctuation>)</span>
                    <span class=code-punctuation>{</span>
                    ${textIndent(`
                            ${refAttr('treeRef', 'loadData', "<span class=code-attr-name>getTreeChild</span>")}
                            <br />
                            <span class=code-attr-name>getTreeRoot()</span>
                        `)
                }
                <span class=code-punctuation>}</span>
                `)))}
                ${textIndent('<span class=code-punctuation>//获取树根节点列表</span>')}
                ${textIndent(fnBox("getTreeRoot", "", `
                <span class=code-keyword>setLoading</span><span class=code-punctuation>(</span>true<span class=code-punctuation>)</span>
                <br />
                <span class=code-attr-name>getTreeRootRequest()</span>.then(<span class=code-this>res</span> <span class=code-keyword>=> {</span>
                    <br />
                    ${textIndent(`
                    treeRef.current.<span class=code-attr-name>treeData</span> = ${returnVAttr('<span class=code-this>res</span>.data.map', `
                            {<br />
                                ${textIndent(`
                                    item.isLeaf = false
                                    <br />
                                    <span class=code-tag>return</span> item`)
                                }
                            }`)}<br />
                    <span class=code-keyword>setLoading</span><span class=code-punctuation>(</span>false<span class=code-punctuation>)</span>`
                            )} <span class=code-keyword>}</span>)
            `))}
            ${textIndent('<span class=code-punctuation>//动态获取树子节点列表</span>')}
            ${textIndent(
                fnBox('getTreeChild',"node",`
                    <span class=code-tag>return</span> <span class=code-attr-name>getTreeChildRequest(<span class=code-punctuation>node.id</span>)</span>
                    `)
            )}
                ${textIndent(
                    returnTagContent("checked-tree", `
                        <span class=code-attr-name>loading</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>loading</span><span class=code-punctuation>}</span>
                        <span class=code-attr-name>ref</span><span class=code-punctuation>=</span><span class=code-punctuation>{</span><span>treeRef</span><span class=code-punctuation>}</span>`)
                )}
                <span class=code-punctuation>};</span>
            `,
            reactCode:`
            import { FC,useRef,useEffect,useState } from 'react';
            import { getTreeRootRequest,getTreeChildRequest } from '@/services/maintenance-package';
            const App: FC<any> = (undefined) => {
                const treeRef = useRef<any>()
                const [ loading, setLoading ] = useState<boolean>(false)
                useEffect(() => {
                    if ( treeRef.current ) {
                        treeRef.current.loadData = getTreeChild
                        getTreeRoot()
                    }
                },[]);
                //获取树根节点列表
                function getTreeRoot() {
                    setLoading(true)
                    getTreeRootRequest().then((res:any) => {
                        treeRef.current.treeData = res.data.map((item:any) => {
                            item.isLeaf = false
                            return item
                        })
                        setLoading(false)
                    })
                }
                //动态获取树子节点列表
                function getTreeChild(node:any) {
                    return getTreeChildRequest(node.id)
                }
                return <checked-tree loading={loading} ref={treeRef}></checked-tree>
            };
            `
        }
    ],
    APIList: [
        {
            field: "fields",
            remark: "节点字段配置,自定义节点 label、value、children 的字段。需要通过访问ref传递，react：ref.current.fields，vue：this.$refs.tree.fields",
            type: "object",
            default: "{ label：name，value：id，children：children }"
        },
        {
            field: "treeData",
            remark: "树形渲染数据,需要通过访问ref传递，react：ref.current.fields，vue：this.$refs.tree.fields",
            type: "TreeNode[]",
            default: "[]"
        },
        {
            field: "loadData",
            remark: "异步数据加载，节点第一次展开时调用,需要通过访问ref传递。",
            type: "function(node) => Promise",
            default: "undefined"
        },
        {
            field: "loadDataReturnFn",
            remark: "异步加载返回数据，需要返回子级列表数据。不传的话，由组件内部控制子级列表渲染,需要通过访问ref传递。",
            type: "function(node) => node[]",
            default: "undefined"
        },
        {
            field: "loadDataListFn",
            remark: "异步加载成功后，触发的方法，参数是当前更新的列表和列表的父节点,需要通过访问ref传递。",
            type: "function(node，list) => void",
            default: "undefined"
        },
        {
            field: "searchtext",
            remark: "搜索关键字，值变化时就会触发搜索",
            type: "string",
            default: ""
        },
        {
            field: "titleRender",
            remark: "自定义渲染节点,只接受HTML字符串，暂不能传输React，Vue得组件标签,需要用ref绑定传输，例如：ref.current.titleRender = （node）=> string",
            type: "function(node)=> string",
            default: "undefined"
        },
        {
            field: "iconRender",
            remark: "自定义渲染图标,只接受HTML字符串，暂不能传输React，Vue得组件标签,需要用ref绑定传输，例如：ref.current.iconRender = （node）=> string",
            type: "function(node)=> string",
            default: ""
        },
        {
            field: "value",
            remark: "外部控制已选中ids，单个字符串是单选，传入数组是多选",
            type: "array | string",
            default: "undefined"
        },
        {
            field: "isicon",
            remark: "是否展示默认文件目录图标",
            type: "boolean",
            default: "false"
        },
        {
            field: "expandid",
            remark: "展开key列表，传入后需要外部控制展开状态",
            type: "array",
            default: "undefined"
        },
        {
            field: "multiple",
            remark: "是否多选，传入value属性后失效。",
            type: "boolean",
            default: false
        },
        {
            field: "loading",
            remark: "加载状态",
            type: "boolean",
            default: false
        },
        {
            field: "cancellation",
            remark: "是否允许取消选择（选中后再次点击取消选择），传入value属性后失效。",
            type: "boolean",
            default: true
        },
    ],
    otherList: [//其他
        {
            title: "TreeNode props",
            header: ["参数", "说明", "类型", "默认值"],//表头和下面list的字段顺序是对应展示的。
            colorFields: {//颜色字段
                type: "#c41d7f"
            },
            list: [
                {
                    name: "nzLoading",
                    remark: "子节点加载状态",
                    type: "boolean",
                    default: "",
                },
                {
                    name: "isLeaf",
                    remark: "设置为叶子节点 (设置了 loadData 时有效)。为 false 时会强制将其作为父节点",
                    type: "boolean",
                    default: "",
                },
                {
                    name: "disabled",
                    remark: "禁掉响应",
                    type: "boolean",
                    default: false,
                },
                {
                    name: "name",
                    remark: "标题",
                    type: "string",
                    default: "",
                },
                {
                    name: "id",
                    remark: "树节点的唯一key",
                    type: "string | number",
                    default: "",
                },
            ]
        },
        {
            title: "内部调用方法",
            titleText: ["需要绑定元素得ref调用"],
            header: ["事件名称", "调用方法", "说明"],//表头和下面list的字段顺序是对应展示的。
            colorFields: {//颜色字段
                type: "#c41d7f"
            },
            list: [
                {
                    name: "updateNode",
                    type: "ref.updateNode(id)",
                    remark: "节点更新，接收一个节点id参数，手动调用后会更新这个节点的子级节点数据，通常用于编辑子节点后，传入父节点id，更新子级数据。",
                },
            ]
        },
        {
            title: "事件",
            titleText: ["需要绑定元素得ref","Vue中使用注意This指向问题，建议用bind绑定","在这些事件中无法访问到React Hooks得最新值，这是因为 React 的 useState 是通过 React 的渲染机制来管理状态的，而 Web Component 是在 React 组件之外运行的，React 无法自动同步它的状态到 Web Component 的事件回调中。\n解决办法：","1、useCallback + useEffect。","2、在每次组件渲染时重新给事件赋值。","3、在react函数外部定义变量，useEffect监听hooks改变赋值给外部变量。"],
            header: ["事件名称", "类型", "说明"],//表头和下面list的字段顺序是对应展示的。
            colorFields: {//颜色字段
                type: "#c41d7f"
            },
            list: [
                {
                    name: "nodeSelect",
                    type: "function（node）",
                    remark: "节点选择,例如ref.current.nodeSelect=(node)=>{}",
                },
                {
                    name: "nodeExpand",
                    type: "function（expandedNode，expandedKeys）",
                    remark: "节点展开,例如ref.current.nodeExpand=(expandedNode,expandedKeys)=>{}",
                },
            ]
        }
    ]
}